﻿<template>
  <div class="git_Exchange_contain" ref="git_contain">
    <Header_other v-bind:header_name ="header_name"></Header_other>
    <!--<transition name="fade">
      <router-view></router-view>
    </transition>-->
    <div class="git_Exchange_inner_header">
        <div class="count_left_header f_l">
          我的积分
        </div>
        <div class="num_count f_l">{{num}}</div>
        <div class="middle_title">
          官方兑换
        </div>
        <div class="my_duih" v-on:click.self="goTo_me">
          我的兑换
        </div>
    </div>
    <div id="wrapper2">
        <scroller class="clearfix scroll_wraper" >
            <div class="wrap_img_box" v-for="info in list"  v-on:click="show_layer_box(info.id)">
              <img :src="info.images|add_base_url">
              <p class="wrap_img_box_name">
                {{info.postName}}
              </p>
              <p class="wrap_img_box_list" v-html="info.postContent">
                <!--{{info.postContent}}-->
              </p>
              <div class="wrap_img_box_last_list mar_top_1">
                <div>积分:</div>
                <div class="wrap_img_dot">{{info.integral}}点</div>
              </div>
              <div class="wrap_img_box_last_list">
                <div>需赚:</div>
                <div class="wrap_img_dot">{{info.maxPoint}}个</div>
              </div>
            </div>
        </scroller>
    </div>
    <!--<Detail_Exchange v-show="layer_show" v-on:hide_detail="hide_detail_1"></Detail_Exchange>-->
    <!--<div>111111111111111</div>-->
    <!--<Footer_n></Footer_n>-->
</div>
</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import Header_other from "./header_other/Header_other.vue";
  import IScroll from "iscroll";
  import { Toast, Indicator } from 'mint-ui';
  //limit_Scroll
  import limit_scroll from "../../static/js/limit_scroll.js"
  import Scroll_view from "./scroll_view/scroll_view.vue"
  import nav_scroll from "./scroll_view/nav_gift_scrol.vue"
  import Footer_n from "../index/FooterMenu.vue";
  //import Detail_Exchange from "./Detail_Exchange.vue";
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        show_layer: false,
        get_layer_show: this.$store.getters.get_layer_show,
        layer_show: false,
        header_name: "礼物兑换",
        list: [],
        num:""
      }
    },
    ...mapActions([
      "thom_redirect",
    ]),
    ...mapMutations([
      "Change_certain_layer",
      "set_wx_user_id"
    ]),
    ...mapGetters([
      "get_user_id"
    ]),
    filters: {
      fmtDate(obj) {
        var date = new Date(obj);
        var y = 1900 + date.getYear();
        var m = "0" + (date.getMonth() + 1);
        var d = "0" + date.getDate();
        return y + "-" + m.substring(m.length - 2, m.length) + "-" + d.substring(d.length - 2, d.length);
      },
      add_base_url(url) {
        let all_url = null
        if (url == undefined) return;
        try {
          all_url = "https://wx.yizhiweimeng.com/yizhiweimen/static/" + url
        } catch (e) {
          console.log(e)
        }
        return all_url
      }
    },
    mounted: function () {
      let id = location.search.split("user_id=")[1];
      this.$store.commit('set_wx_user_id', id);
      sessionStorage.setItem("user_id", id);
      //分享时 id 在 url 中 我日
      //location.search.replace(/[^0-9]/ig, "").split(0)

      Indicator.open();
      this.$http.all([
        this.$http.get('/yizhiweimen/api/user/getUserById?id=' + id),
        this.$http.get('/yizhiweimen/api/user/tokenExchange/getOfficialposts')
      ])
      .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
      }).then(this.$http.spread( (user_id, offical)=> {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();

          this.num = user_id.data.integral || null;

          let new_list =[];
          for (let x = 0; x < offical.data.length; x++) {
            for (let y = 0; y < offical.data[x].length; y++) {
                 new_list.push(offical.data[x][y]);
            }
          }

          this.list = new_list;
          sessionStorage.setItem("school_id", user_id.data.school.id)

      }))
    },
    methods: {
      refresh: function () {

      },
      infinite: function () {

      },
      show_layer_box: function (id) {
       let user_id = sessionStorage.getItem("user_id")
       sessionStorage.setItem("off_post_id", id)
        //sessionStorage.setItem("all_id", user_id + "0" + useid);
        //用 0 做分割
       //location.search = "all_id=" + id + "0" + user_id

        this.$store.dispatch("thom_redirect",
          {
            name: "/Detail_Exchange?id="+id, router: this.$router
          });
      },
      hide_detail_1: function () {
      },
      goTo_me: function () {
        this.$store.dispatch("thom_redirect",
          {
            name: "/my_Exchange", router: this.$router
          });
      }
    },
    components: {
      Header_other,
      Scroll_view,
      nav_scroll,
      Footer_n
      //Detail_Exchange
    }
  }
</script>
<style scoped>
  /*offbox*/
  .wrap_img_dot {
    padding-right: 6%;
  }
  .wrap_img_box:nth-child(2n+0) {
    /*background: #ff0000;*/
    margin-left: 4vw;
  }
  .mar_top_1 {
    margin-top: 0.3rem;
  }
  .wrap_img_box{
    float:left;
    margin-left:7vw;
    margin-top:1rem;
  }
  .wrap_img_box_last_list {
    color: #9f5c2f;
    line-height: 1;
    font-size: 10px;
    line-height:1.6;
    display: flex;
    padding-left: 4%;
    padding-right: 4%;
    justify-content: space-between;
  }

  .wrap_img_box_list {
    color: #9f9f9f;
    font-size: 0.5rem;
    padding-left: 4%;
    text-align: left;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wrap_img_box_name {
    font-size: 0.5rem;
    margin-top: 0.575rem;
    margin-bottom: 0.35rem;
    line-height: 1;
    font-weight: 600;
    text-align: left;
    padding-left: 5%;
  }

  .swiper-button-prev {
    user-select: none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../static/img/nav_scroll/nav_left.png")
  }

  .swiper-button-next {
    user-select: none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../static/img/nav_scroll/nav_right.png")
  }

  .swiper_btn {
    position: relative;
  }

  .wrap_img {
    width: 76vw;
    height: 8.4rem;
    margin: 0.5rem auto 0;
    display: flex;
    justify-content: space-between
  }

  .wrap_img_box {
    width: 41vw;
    height: 10rem;
    background-color: #fff;
    box-shadow: 0 0 8px 2px rgba(181, 175, 175, 0.4);
    border-radius: 2vw;
  }

    .wrap_img_box img {
      display: block;
      width: 100%;
      height: 5.2rem;
      border-radius:2vw 2vw 0 0;
    }

    .wrap_img_box:nth-child(2) {
      // margin-left:4vw;
    }

  .swiper_btn_left {
    position: absolute;
    left: 1vw;
  }

    .swiper_btn_left img {
      display: block
    }

  .swiper_btn_left {
    position: absolute;
    right: 1vw;
  }

    .swiper_btn_left img {
      display: block;
    }
  /*offbox*/
  .git_Exchange_contain{
    height:100%;
  }
  .git_Exchange_inner_header {
    height: 1.8rem;
    line-height: 1.8rem;
    box-shadow: 0 2px 4px 1px #b1abab
  }

  .count_left_header {
    font-size: 0.6rem;
    padding-left: 3.2%;
    color: #9f5c2f;
    float: left;
  }

  .num_count {
    float: left;
    font-size: 0.6rem;
    padding-left: 1.2%
  }

  .git_Exchange_inner_header {
    position: relative;
    color: #9f5c2f;
    font-weight: 600;
    background-color: #fff;
  }

  .middle_title {
    font-size: 0.8rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .my_duih {
    width: 15%;
    font-size: 0.6rem;
    height: 1.1rem;
    line-height: 1.1rem;
    border: 1px solid #9f5c2f;
    float: right;
    margin-top: 0.25rem;
    margin-right: 3%;
    border-radius:1vw;
  }

  .banner_swiper {
    height: 9.2rem;
    line-height: 9.2rem;
    background-color: #eeeeee;
  }

  .middle_nav {
    text-align: center;
    font-size: 0.8rem;
    color: #9f5c2f;
    height: 1.75rem;
    background-color: #fff;
    line-height: 1.75rem;
    box-shadow: 0 2px 10px 2px rgba(115, 112, 112, 0.44);
  }

  .last_container {
    width: 100%;
    height: 16.65rem;
    background-color: #eee;
  }

  .middle_nav {
    text-align: center;
    position: relative;
  }

  .middle_nav_btn {
    position: absolute;
    top: 0;
    right: 3%;
    margin-right: 0;
  }
  /*last box*/
  .last_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    // overflow-y: scroll;
  }

  .last_box {
    float: left;
    width: 30vw;
    height: 7.2rem;
    box-shadow: 0 0 10px 2px rgba(177, 173, 173, 0.44);
    background-color: #fff;
    border-radius: 2vw;
    margin-top: 0.37rem;
    margin-left: 2.5vw;
  }

  .last_box_img {
    border-radius: 2vw 2vw 0 0;
    width: 100%;
    height: 3.75rem;
  }
  /*last_container s*/
  /* .last_box:nth-last-of-type(1) {
    margin-bottom:6rem;
  }
   */
  .last_box_style {
    margin-bottom: 6rem;
  }

  .last_box p {
    font-size: 0.5rem;
    font-weight: 600;
    text-align: left;
    margin-left: 8%;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .last_box_list {
    margin-left: 6%;
    margin-right: 10%;
    font-size: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .last_box_user_img {
    float: left;
    display: block;
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid #a25f34;
    border-radius: 0.5vw;
  }

  .last_box_user_name {
    float: left;
    color: #a25f34;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
    margin-top: 0.15rem;
    margin-left: 0.2rem;
  }

  .last_box_user {
    transform: translate(6vw,0.2rem);
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .2s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
 /*scroll s*/
  body {
    /* On modern browsers, prevent the whole page to bounce */
    overflow: hidden;
  }

  #wrapper2 {
    display:flex;
    justify-content:space-between;
    background-color: #eee;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
  }

  #scroller {
    background-color:#eeeeee;
    position: absolute;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  /*certain btn e*/
  /*scroll e*/
</style>



